import * as React from 'react'
import { isNumber, isFunc, isString } from 'muka'
import { getClassName } from '../utils'
import Input from '../Input'
import Icon from '../Icon'

interface IProps {
    className?: string
    length?: number
    onComplete?: (val: string) => void
    autoFoucs?: boolean
    pwdHide?: boolean
}

interface IState {
    value: string
    visible: boolean
}

export default class PayInput extends React.Component<IProps, IState> {

    public static defaultProps = {
        length: 6,
        autoFoucs: false,
        pwdHide: true
    }

    public state = {
        value: '',
        visible: this.props.autoFoucs || false
    }

    private intVal: any[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, <div key="remove"><Icon style={{fontSize: '1.4rem', color: '#222'}} type="keyboard_delete" /></div>]

    public render(): JSX.Element {
        const { className, length } = this.props
        const { value, visible } = this.state
        return (
            <div className={getClassName('pay_input flex', className)}>
                {Array.apply(null, { length }).map((item: undefined, index: number) => {
                    return <Input className={getClassName('pay_input_val flex_1')} type="password" iconShow={false} key={index} value={value[index]} onFocus={this.handleFocus} />
                })}
                <div className={getClassName('pay_input_view', visible ? '' : 'visible')}>
                    {
                        this.intVal.map((item: number, index: number) => {
                            return <div className={getClassName('pay_input_view__val')} onClick={this.handleValue.bind(this, item)} key={index}>{item}</div>
                        })
                    }
                </div>
            </div>
        )
    }

    // public componentDidMount() {
    //     document.addEventListener('click', this.handleClose, false)
    // }

    // public componentWillUnmount() {
    //     document.removeEventListener('click', this.handleClose, false)
    // }

    // private handleClose = (e: any) => {
    //     const { visible } = this.state
    //     console.log(e.target)
    //     if (visible) {
    //         this.setState({
    //             visible: false
    //         })
    //     }
    // }

    private handleFocus = (e: React.ChangeEvent<HTMLInputElement>) => {
        const active: any = document.activeElement
        if (active.blur) {
            active.blur()
        }
        this.setState({
            visible: true
        })
        e.stopPropagation()
        e.nativeEvent.stopImmediatePropagation()
    }

    private handleValue(val: any, e: React.ChangeEvent<HTMLDivElement>) {
        const { value } = this.state
        const { length, onComplete, pwdHide } = this.props
        const str = value + val
        if (isNumber(val) && value.length < (length || 6)) {
            this.setState({
                value: str
            })
        }
        if (str.length === (length || 6) && isFunc(onComplete)) {
            onComplete(str)
            if (pwdHide) {
                this.setState({
                    visible: false
                })
            }
        }
        if (!isString(val) && !isNumber(val)) {
            const v = value.substring(0, value.length - 1)
            this.setState({
                value: v
            })
        }
    }

}